<template>
  <div class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="primary" @click="handleTableBtnClick({}, 'add')"
          ><i-ep-plus />新增</el-button
        >
        <!-- <el-button type="primary" @click="handleTableBtnClick({}, 'set-all')"
          >一键设置所有产品费率</el-button
        > -->
        <!-- <el-button
          type="danger"
          :disabled="ids.length === 0"
          @click="handleDelete()"
          ><i-ep-delete />删除</el-button
        > -->
      </template>
      <comTable
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        @link-click="handleTableBtnClick"
      >
        <template #pass_show="{ row, index }">
          <el-switch
            v-model="row.pass_show_com"
            @change="(val) => handleChangeStatus(val, row, index, 'pass_show')"
          />
        </template>
        <template #status="{ row, index }">
          <el-switch
            v-model="row.status_com"
            @change="(val) => handleChangeStatus(val, row, index, 'status')"
          />
          <!-- <el-tag type="info" effect="dark">{{ row.status_com }}</el-tag> -->
        </template>

        <template #amountCom="{ row, index }">
          <span v-if="row.limit_type == 1" style="color: #1482f0"
            >{{ row.min_amount }} - {{ row.max_amount }}</span
          >
          <span v-else style="color: #009f95">{{ row.fixed_amount }}</span>
        </template>
      </comTable>

      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
      @closed="closedDialog"
    >
      <!-- <el-scrollbar height="calc(100vh - 400px)"> -->
      <FormList
        v-if="initDialogForm.initKeys.length"
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initDialogForm"
      ></FormList>
      <!-- </el-scrollbar> -->
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick">{{
            dialog.leftBtnText
          }}</el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { watch } from "vue";
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
import {
  list,
  add,
  edit,
  setMsProductRate,
  tuneUpMsProductRate,
} from "@/api/other/pay_product";
import { ProductListVO } from "@/api/other/types";
import { usePayProductStore } from "@/store";
import { cloneDeep } from "lodash";

const switchFieldHandle = inject("switchFieldHandle");
const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 20,
    page: 1,
    total: 0,
  },
  queryParams: {},
});
const loading = ref(false);

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "pro_name",
      // 表单属性
      formAttrs: {
        label: "产品名称",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入产品名称",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "pass_code",
      // 表单属性
      formAttrs: {
        label: "通道代码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入通道代码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: object) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);

                  let tempData = { ...data };
                  tableDatasObj.value.paging.page = 1;
                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: object) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item: ProductListVO) => {
    return {
      ...item,
      pass_show_com: item.pass_show === 1 ? true : false,
      status_com: item.status === 1 ? true : false,
    };
  });
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  { label: "ID", prop: "id", width: 100 },
  { label: "产品名称", prop: "pro_name", minWidth: 180 },
  { label: "通道代码", prop: "pass_code", minWidth: 180 },
  { label: "接单金额", prop: "amountCom", type: "slot", width: 200 },
  // { label: "通道显示", prop: "pass_show", width: 200, type: "slot" },
  { label: "订单超时时间（分钟）", prop: "order_timeout_time", minWidth: 180 },
  { label: "浮动金额", prop: "order_float_amount_num", minWidth: 100 },
  { label: "通道状态", prop: "status", width: 200, type: "slot" },
  {
    label: "操作",
    isSort: false,
    prop: "operation",
    columnAttrs: {
      fixed: "right",
      width: 180,
    },
    children: [
      {
        type: "button",
        btnText: "渠道配置",
        title: "edit",
      },
      // {
      //   type: "button",
      //   btnText: "调整费率",
      //   title: "rate-adjustment",
      // },
      // {
      //   type: "button",
      //   btnText: "设置费率",
      //   title: "set-rate",
      // },
      {
        type: "button",
        btnText: "清空费率",
        title: "clearing-rate",
      },
    ],
  },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({ ...tableDatasObj.value.paging, ...tableDatasObj.value.queryParams })
    .then((res) => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;
    })
    .finally(() => {
      loading.value = false;
    });
  // if (tableDatasObj.paging.typeCode) {
  // loading.value = true;
  // getDictPage(queryParams)
  //   .then(({ data }) => {
  //     dictList.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => (loading.value = false));
  // }
}
// 完*********************************************

const initDialogForm = ref({
  // 表单标签位置
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
    style: {
      paddingRight: "10px",
    },
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 2,
  },
  // 初始化表单字段
  initKeys: <any>[],
});

let initDialogFormBak = cloneDeep(initDialogForm.value);

const limitTypeOptions = [
  {
    // 标签
    label: "区间金额",
    // 值
    value: "1",
  },
  {
    // 标签
    label: "固定金额",
    // 值
    value: "2",
  },
];

let limit_typeIsShow = true;

function handleTableBtnClick(row: object, title: string) {
  dialog.type = title;
  dialog.visible = true;
  dialog.singleData = tableDatasObj.value.list.find((item) => item.id === row.id);

  initDialogForm.value.rowAttrs.columnsNum = 2;

  if (title === "add") {
    // 新增支付产品
    dialog.title = "新增支付产品";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys = [
      // pro_name  产品名称
      // pass_code 通道代码
      // pass_show 通道显示
      // order_timeout_time  订单超时时间
      // order_float_amount  订单金额浮动
      // order_float_amount_num  订单浮动金额个数
      // pay_page_sub_name 支付页面是否提交姓名
      // int_skm_amount  码商设置整数收款码金额
      // skm_amount_range  码商设置收款码金额区间
      // code_lock 锁码
      // status  状态
      {
        // 类型
        type: "input",
        // 唯一标识
        key: "pro_name",
        // 表单属性
        formAttrs: {
          label: "产品名称",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入产品名称",
          // 是否可清空
          clearable: true,
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input",
        // 唯一标识
        key: "pass_code",
        // 表单属性
        formAttrs: {
          label: "通道代码",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入通道代码",
          // 是否可清空
          clearable: true,
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "order_timeout_time",
        // 表单属性
        formAttrs: {
          label: "订单超时时间（分钟）",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入订单超时时间（分钟）",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "order_float_amount_num",
        // 表单属性
        formAttrs: {
          label: "订单浮动金额个数",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入订单浮动金额个数",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        // 控制事件
        controlOn: {},
        value: 0,
      },
      {
        type: "select",
        // 唯一标识
        key: "limit_type",
        // 表单属性
        formAttrs: {
          label: "金额限制类型",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请选择金额限制类型",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        controlOn: {
          change(val) {
            const value = val.toString();
            const controlIndexs = [5, 6, 7];
            let indexs = [];

            if (value === "1") {
              indexs = [5, 6];
            } else if (value === "2") {
              indexs = [7];
            }

            controlIndexs.map((i) => {
              if (indexs.includes(i)) {
                initDialogForm.value.initKeys[i].hidden = false;
              } else {
                initDialogForm.value.initKeys[i].hidden = true;
              }
            });

            nextTick(() => {
              const index = initDialogForm.value.initKeys.findIndex(
                (item) => item.key === "limit_type"
              );

              initDialogForm.value.initKeys[index].value = value;
            });
          },
        },
        // 选项
        options: limitTypeOptions,
      },
      {
        // 最小接单金额
        type: "input-number",
        // 唯一标识
        key: "min_amount",
        // 表单属性
        formAttrs: {
          label: "最小接单金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入最小接单金额",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      {
        // 最大接单金额
        type: "input-number",
        // 唯一标识
        key: "max_amount",
        // 表单属性
        formAttrs: {
          label: "最大接单金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入最大接单金额",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      {
        // 固定金额
        type: "input",
        // 唯一标识
        key: "fixed_amount",
        // 表单属性
        formAttrs: {
          label: "固定金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入固定金额(多个以,隔开)",
          // 是否可清空
          clearable: true,
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "pass_show",
      //   // 表单属性
      //   formAttrs: {
      //     label: "通道显示",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "order_float_amount",
      //   // 表单属性
      //   formAttrs: {
      //     label: "订单金额浮动",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      {
        // 类型
        type: "switch",
        // 唯一标识
        key: "pay_page_sub_name",
        // 表单属性
        formAttrs: {
          label: "支付页面是否提交姓名",
        },
        // 控制属性
        controlAttrs: {
          value: false,
        },
        // 控制事件
        controlOn: {},
      },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "int_skm_amount",
      //   // 表单属性
      //   formAttrs: {
      //     label: "码商设置整数收款码金额",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "skm_amount_range",
      //   // 表单属性
      //   formAttrs: {
      //     label: "码商设置收款码金额区间",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "code_lock",
      //   // 表单属性
      //   formAttrs: {
      //     label: "锁码",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      {
        // 类型
        type: "switch",
        // 唯一标识
        key: "status",
        // 表单属性
        formAttrs: {
          label: "通道状态",
        },
        // 控制属性
        controlAttrs: {
          value: false,
        },
        // 控制事件
        controlOn: {},
      },
    ];
  } else if (title === "edit") {
    // 渠道配置
    dialog.title = "渠道配置";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys = [
      // pro_name  产品名称
      // pass_code 通道代码
      // pass_show 通道显示
      // order_timeout_time  订单超时时间
      // order_float_amount  订单金额浮动
      // order_float_amount_num  订单浮动金额个数
      // pay_page_sub_name 支付页面是否提交姓名
      // int_skm_amount  码商设置整数收款码金额
      // skm_amount_range  码商设置收款码金额区间
      // code_lock 锁码
      // status  状态
      {
        // 类型
        type: "input",
        // 唯一标识
        key: "pro_name",
        // 表单属性
        formAttrs: {
          label: "产品名称",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入产品名称",
          // 是否可清空
          clearable: true,
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input",
        // 唯一标识
        key: "pass_code",
        // 表单属性
        formAttrs: {
          label: "通道代码",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入通道代码",
          // 是否可清空
          clearable: true,
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "order_timeout_time",
        // 表单属性
        formAttrs: {
          label: "订单超时时间（分钟）",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入订单超时时间（分钟）",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "order_float_amount_num",
        // 表单属性
        formAttrs: {
          label: "订单浮动金额个数（负数代表下浮，正数代表上浮）",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入订单浮动金额个数",
          // 是否可清空
          clearable: true,
          min: -100,
          style: {
            width: "100%",
          },
        },
        // 控制事件
        controlOn: {},
      },
      {
        type: "select",
        // 唯一标识
        key: "limit_type",
        // 表单属性
        formAttrs: {
          label: "金额限制类型",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请选择金额限制类型",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        controlOn: {
          change(val) {
            const value = val.toString();
            const controlIndexs = [5, 6, 7];
            let indexs = [];

            if (value === "1") {
              indexs = [5, 6];
            } else if (value === "2") {
              indexs = [7];
            }

            controlIndexs.map((i) => {
              if (indexs.includes(i)) {
                initDialogForm.value.initKeys[i].hidden = false;
              } else {
                initDialogForm.value.initKeys[i].hidden = true;
              }
            });

            nextTick(() => {
              const index = initDialogForm.value.initKeys.findIndex(
                (item) => item.key === "limit_type"
              );

              initDialogForm.value.initKeys[index].value = value;
            });
          },
        },
        // 选项
        options: limitTypeOptions,
      },
      {
        // 最小接单金额
        type: "input-number",
        // 唯一标识
        key: "min_amount",
        // 表单属性
        formAttrs: {
          label: "最小接单金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入最小接单金额",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      {
        // 最大接单金额
        type: "input-number",
        // 唯一标识
        key: "max_amount",
        // 表单属性
        formAttrs: {
          label: "最大接单金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入最大接单金额",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      {
        // 固定金额
        type: "input",
        // 唯一标识
        key: "fixed_amount",
        // 表单属性
        formAttrs: {
          label: "固定金额",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入固定金额(多个以,隔开)",
          // 是否可清空
          clearable: true,
        },
        hidden: true,
        // 控制事件
        controlOn: {},
      },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "pass_show",
      //   // 表单属性
      //   formAttrs: {
      //     label: "通道显示",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "order_float_amount",
      //   // 表单属性
      //   formAttrs: {
      //     label: "订单金额浮动",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      {
        // 类型
        type: "switch",
        // 唯一标识
        key: "pay_page_sub_name",
        // 表单属性
        formAttrs: {
          label: "支付页面是否提交姓名",
        },
        // 控制属性
        controlAttrs: {
          value: false,
        },
        // 控制事件
        controlOn: {},
      },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "int_skm_amount",
      //   // 表单属性
      //   formAttrs: {
      //     label: "码商设置整数收款码金额",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "skm_amount_range",
      //   // 表单属性
      //   formAttrs: {
      //     label: "码商设置收款码金额区间",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      // {
      //   // 类型
      //   type: "switch",
      //   // 唯一标识
      //   key: "code_lock",
      //   // 表单属性
      //   formAttrs: {
      //     label: "锁码",
      //   },
      //   // 控制属性
      //   controlAttrs: {
      //     value: false,
      //   },
      //   // 控制事件
      //   controlOn: {},
      // },
      {
        // 类型
        type: "switch",
        // 唯一标识
        key: "status",
        // 表单属性
        formAttrs: {
          label: "通道状态",
        },
        // 控制属性
        controlAttrs: {
          value: false,
        },
        // 控制事件
        controlOn: {},
      },
    ];

    const controls = initDialogForm.value.initKeys;

    controls
      .map((item) => item.key)
      .map((key, i) => {
        let val = dialog.singleData[key];
        if (
          [
            "pass_show",
            "order_float_amount",
            "pay_page_sub_name",
            "int_skm_amount",
            "skm_amount_range",
            "code_lock",
            "status",
          ].includes(key)
        ) {
          val = !!((val || "").toString() === "1");
          // val = true;
        } else {
          val = (val || "").toString();
        }
        initDialogForm.value.initKeys[i].value = val;
      });

    initDialogForm.value.initKeys[4].controlOn.change(dialog.singleData.limit_type);
  } else if (title === "rate-adjustment") {
    // 调整费率
    initDialogForm.value.rowAttrs.columnsNum = 1;
    dialog.width = 400;
    dialog.title = "调整费率（统一按照百分比计算）";
    dialog.leftBtnText = "上 调";
    dialog.rightBtnText = "下 调";
    initDialogForm.value.initKeys = [
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "rate",
        // 表单属性
        formAttrs: {
          // label: "自定义引导语",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入需要调整的费率",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
          min: 0,
        },
        appendTxt: "%",
        // 控制事件
        controlOn: {},
      },
    ];
  } else if (title === "set-rate") {
    // 设置费率
    initDialogForm.value.rowAttrs.columnsNum = 1;
    dialog.width = 400;
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys = [
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "rate",
        // 表单属性
        formAttrs: {
          label: "需要设置的费率",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入需要设置的费率",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
          min: 0,
        },
        appendTxt: "%",
        // 控制事件
        controlOn: {},
      },
    ];
  } else if (title === "clearing-rate") {
    dialog.visible = false;

    ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
      let params = {
        rate: 0,
        id: dialog.singleData.id,
      };

      setMsProductRate(params).then((res) => {
        ElMessage.success("清空费率成功");
        handleQuery();
      });
    });
  } else if (title === "set-all") {
    initDialogForm.value.rowAttrs.columnsNum = 1;
    dialog.width = 400;
    dialog.title = "一键设置所有产品费率";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys = [
      {
        // 类型
        type: "select-v2",
        // 唯一标识
        key: "id",
        // 表单属性
        formAttrs: {
          label: "支付产品",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请选择支付产品",
          // 是否可清空
          clearable: true,
          options: [],
        },
        // 控制事件
        controlOn: {},
      },
      {
        // 类型
        type: "input-number",
        // 唯一标识
        key: "rate",
        // 表单属性
        formAttrs: {
          label: "费率",
        },
        // 控制属性
        controlAttrs: {
          // 提示文本
          placeholder: "请输入费率",
          // 是否可清空
          clearable: true,
          style: {
            width: "100%",
          },
        },
        value: 0,
        // 控制事件
        controlOn: {},
      },
    ];

    let proLists = [];
    (async () => {
      proLists = await usePayProductStore().loadPayProducts();

      initDialogForm.value.initKeys[0].controlAttrs.options = proLists.map((item) => ({
        label: item.pro_name,
        value: item.id,
      }));
    })();
  }
}

// 弹窗对象
const dialog = reactive({
  visible: false,
  // type: "user-form",
  width: 800,
  title: "",
  leftBtnText: "确 定",
  rightBtnText: "取 消",
});
const dialogBak = cloneDeep(dialog);

let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
function closeDialog() {
  dialog.visible = false;

  //   nextTick(() => {
  //     formDialogId.value?.resetFields();
  //     formDialogId.value?.clearValidate();
  //     initDialogForm.value.initKeys.splice(0);
  //     Object.keys(dialogBak).map((key) => {
  //       dialog[key] = dialogBak[key];
  //     });

  //     initDialogForm.value = cloneDeep(initDialogFormBak);
  //   });
}
function closedDialog() {
  // formDialogId.value?.resetFields();
  // formDialogId.value?.clearValidate();
  formDialogId.value = {};
  Object.keys(dialogBak).map((key) => {
    dialog[key] = dialogBak[key];
  });
  initDialogForm.value = cloneDeep(initDialogFormBak);
}

let formDialogModel = ref({});
function handleLeftClick() {
  if (dialog.type === "add") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value };

        params.pass_show = params.pass_show ? 1 : 2;
        params.order_float_amount = params.order_float_amount ? 1 : 2;
        params.pay_page_sub_name = params.pay_page_sub_name ? 1 : 2;
        params.int_skm_amount = params.int_skm_amount ? 1 : 2;
        params.skm_amount_range = params.skm_amount_range ? 1 : 2;
        params.code_lock = params.code_lock ? 1 : 2;
        params.status = params.status ? 1 : 2;

        add(params).then((res) => {
          ElMessage.success("新增成功");
          closeDialog();
          handleQuery();
          usePayProductStore().refreshAddedRoute();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  } else if (dialog.type === "edit") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value, id: dialog.singleData.id };

        params.pass_show = params.pass_show ? 1 : 2;
        params.order_float_amount = params.order_float_amount ? 1 : 2;
        params.pay_page_sub_name = params.pay_page_sub_name ? 1 : 2;
        params.int_skm_amount = params.int_skm_amount ? 1 : 2;
        params.skm_amount_range = params.skm_amount_range ? 1 : 2;
        params.code_lock = params.code_lock ? 1 : 2;
        params.status = params.status ? 1 : 2;

        edit(params).then((res) => {
          ElMessage.success("配置成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  } else if (dialog.type === "rate-adjustment") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value, id: dialog.singleData.id };

        tuneUpMsProductRate(params).then((res) => {
          ElMessage.success("上整费率成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  } else if (dialog.type === "set-rate") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value, id: dialog.singleData.id };

        setMsProductRate(params).then((res) => {
          ElMessage.success("调整费率成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  } else if (dialog.type === "set-all") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = { ...formDialogModel.value, id: dialog.singleData.id };

        setMsProductRate(params).then((res) => {
          ElMessage.success("调整费率成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  }
}
function handleRightClick() {
  if (dialog.type === "rate-adjustment") {
    formDialogId.value.validate((valid, fields) => {
      if (valid) {
        let params = {
          rate: -parseFloat(formDialogModel.value.rate),
          id: dialog.singleData.id,
        };

        tuneUpMsProductRate(params).then((res) => {
          ElMessage.success("下整费率成功");
          closeDialog();
          handleQuery();
        });
      } else {
        console.log("error submit!", fields);
      }
    });
  } else {
    closeDialog();
  }
}

function handleChangeStatus(val, obj, index, fieldName) {
  // tableDatasObj.value.list[index][fieldName] = switchFieldHandle.getField(!val);
  let params = { ...obj };
  params[fieldName] = switchFieldHandle.getField(val);

  loading.value = true;
  edit(params)
    .then((res) => {
      ElMessage.success("修改成功");
      handleQuery();
    })
    .catch(() => {
      tableDatasObj.value.list[index][fieldName] = switchFieldHandle.getField(val);
      nextTick(() => {
        tableDatasObj.value.list[index][fieldName] = switchFieldHandle.getField(!val);
      });
    });
}

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style scoped></style>
